Open topic with navigation

Open topic with navigation

Text Components

A text component is a simple text box. Besides the standard text-related properties, there are two that add HTML support, as follows:

If you enable one of these properties, you must set Editable to FALSE, Horizontal Alignment to Left, and Vertical Alignment to Top. Hard line breaks added by pressing Alt + Enter are not rendered.

ClosedHow do I ...?

...Display a large text field for easier text entry?

Click the FULL-SIZE ICON next to the Text property field.

...Insert a hard line break?

If you are editing text in the text property field, type Alt + Enter. If you are editing in the large text field, type Enter.

...Add a font to my project?

To add a new font to your project:

  1. If your project does not have a fonts folder, right-click the project root folder add a folder named "fonts".
  2. In a file explorer, locate the font file on your computer and drag it to the project fonts folder.
  3. Save the project and refresh the browser.

WOFF is the recommended font format for Solution Builder projects.

...Use a custom icon font?

To obtain or create a custom icon font, you can use an online service like the IcoMoon App. Add the font to your fonts folder as described above. To embed a glyph from a custom icon font in a text component, set the font property of the text component to the custom icon font and use one of the following methods:

Copy and paste: Copy the glyph from a font viewer and paste it into the text property.

HTML code: Enable the text component's isHTML or isAdvancedHTML property and use the HTML code for the glyph. To determine the code, look at the CSS definition. For example, if the CSS looks like this:

	.<icon name>:before {
			content: "\e932"

... use the following HTML to embed the glyph in a text component: &#xe932;

Note: When you use an online icon font generator, the code for each entity might change when you re-upload the icons or regenerate the font. To avoid the need to update glyphs or HTML code in the Property Inspector, make sure your font has all the icons you want before you start using it.

...Enable the user to edit text in a text component?

In the Outline or Document window, select the text component. In the Property Inspector, under Text and Font, set Editable to TRUE. Alternatively, you can use the text input component and text area component to accept user input.

...Configure a text component to grow or shrink according to its content?

Set both the Height and Width of the text component to auto as follows:

  1. Select the text component
  2. In the Property Inspector's Position and Size section, mouse over the blue dot next to the width setting and right-click.
  3. Choose Reset from the Context menu. Verify that the width setting has changed to auto.
  4. Set height to auto, as you did for width in the preceding steps.

...cause the font size to grow or shrink according to the size of text component?

Set the text component's Font Size property to auto.

Return to Atrius Developer Portal Home Page